<!--
 * @Author: bingbing.geng
 * @Date: 2022-08-26 16:01:28
 * @LastEditTime: 2022-08-30 13:11:57
 * @FilePath: \tengyu-vscode\d3-charts.html
-->
<html>

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        svg rect {
            fill: blue;
        }

        svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
        }
        .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         .arc path {
            stroke: #fff;
         }
        .title {
            fill: green;
            font-weight: italic;
         }
    </style>
</head>

<body>
    <div id="bar"></div>
    <div id="circle"></div>
    <div id="pie"></div>
    <script>
        const barChart = () => {
            const data = [10, 5, 12, 15, 60];
            const width = 300
            const scaleW = 5;
            const barH = 30;

            // 设置条状图的区域范围（长和宽以及元素）
            const barDom = d3.select('#bar')
                .append('svg')
                .attr('width', width)
                .attr('height', barH * data.length)
                .style("border", "1px solid black");
            
            // 根据数据创建条形图的分组（g），使用transform增加g的位置
            const bar = barDom.selectAll('g')
                .data(data)
                .enter()
                .append('g')
                .attr("transform", function (d, i) {
                    return "translate(0," + i * barH + ")";
                });

            // 创建矩状条形rect，根据数据大小设置其宽度
            bar.append('rect').attr("width", d => {
                return d * scaleW
            }).attr("height", barH - 1)
            
            // 在rect中添加文字，表示大小
            bar.append("text")
                .attr("x",  d => { return (d * scaleW); })
                .attr("y", barH / 2)
                .attr("dy", ".35em")
                .text(d => { return d; });
        }
        barChart()

        const circleChart = () => {
            const width = 400;
            const height = 400;
            const data = [10, 20, 30];
            const colors = ['blue', 'red', 'green'];

            const circleDOM = d3.select("#circle")
                .append('svg')
                .attr("width", width)
                .attr("height", height);
            
            const g = circleDOM.selectAll('g')
                .data(data)
                .enter()
                .append('g')
                .attr('transform', (d, i) => {
                    return `translate(${i * 60}, 50)`
                });

            g.append('circle')
                .attr('cx', (d, i) => {
                    return i * 50 + 50
                })
                .attr('cy', 50)
                .attr('r', d => {
                    return d * 2
                })
                .attr('fill', (d, i) => {
                    return colors[i]
                })

            g.append('text')
                .attr('x', (d, i) => {
                    return i*50 + 55
                })
                .attr('y', 55)
                .attr('stroke', '#FFFFFF')
                .attr('font-size', '18px')
                .text(d => d)
                .attr('title', d => d)
        }
        circleChart()

        const pieChart = () => {
            var data = [["剧情",23],["喜剧",21],["战争",18],["动画",15],["动作",13],["爱情",5],["其他",5]];
            const width = 500;
            const height = 500;
            var svg = d3.select("#pie").append('svg').attr('width', width).attr('height', height);
                radius = Math.min(width, height)/2;
            var g = svg.append("g")
                .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
            var color = d3.scaleOrdinal([
                'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
            ]);
            var pie = d3.pie().value(function(d) { 
                return d[0]; 
            });
            var path = d3.arc()
                .outerRadius(radius - 10).innerRadius(0);
            var label = d3.arc()
                .outerRadius(radius).innerRadius(radius - 80);

            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data[1]); });
            console.log(arc)
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            .text(function(d) { return d.data[1]; });

            svg.append("g")
                .attr("transform", "translate(" + (width/2 - 120) + "," + 20 + ")")
                .append("text").text("Top population states in india")
                .attr("class", "title")
        }
        pieChart()
    </script>
</body>

</html>